Button এবং TextBox এর Custom Template তৈরি করা

XAML এ Custom Template তৈরি করার মাধ্যমে আপনি Button এবং TextBox এর ডিজাইন সম্পূর্ণভাবে কাস্টমাইজ করতে পারেন। Custom Template হল একটি নতুন স্টাইল যা কন্ট্রোলের মূল কাঠামো এবং ভিজ্যুয়াল উপাদানকে সম্পূর্ণভাবে পরিবর্তন করে।

এখানে Button এবং TextBox এর জন্য Custom Template তৈরির একটি উদাহরণ দেওয়া হলো।

Button এর Custom Template

Button এর Custom Template তৈরি করে আপনি বাটনের বিভিন্ন ভিজ্যুয়াল স্টাইল কাস্টমাইজ করতে পারেন। এটি সাধারণত ControlTemplate এর মাধ্যমে করা হয়।

উদাহরণ: Button এর Custom Template

<Button Width="200" Height="100" Content="Click Me">
    <Button.Template>
        <ControlTemplate TargetType="Button">
            <Border Background="LightBlue" BorderBrush="DarkBlue" BorderThickness="2" CornerRadius="15">
                <Grid>
                    <TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" Text="{TemplateBinding Content}" FontSize="20" />
                </Grid>
            </Border>
        </ControlTemplate>
    </Button.Template>
</Button>

এখানে:

• ControlTemplate: Button কন্ট্রোলের কাস্টম কাঠামো তৈরি করেছে। এতে বর্ডার, ব্যাকগ্রাউন্ড, এবং একটি TextBlock ব্যবহার করা হয়েছে।
• TemplateBinding: এটি বাটনের কন্টেন্ট (Content) কাস্টম টেমপ্লেটে ব্যবহার করার জন্য TemplateBinding ব্যবহার করেছে।
• Border: বাটনের চারপাশে একটি বর্ডার দিয়ে ডিজাইন করা হয়েছে, এবং বর্ডারের কোণার আকার CornerRadius দিয়ে সেট করা হয়েছে।

TextBox এর Custom Template

TextBox এর Custom Template তৈরি করার মাধ্যমে আপনি তার ভিতরের UI উপাদান যেমন বর্ডার, টেক্সট এবং অন্যান্য উপাদান কাস্টমাইজ করতে পারেন।

উদাহরণ: TextBox এর Custom Template

<TextBox Width="300" Height="40" Text="Enter Text">
    <TextBox.Template>
        <ControlTemplate TargetType="TextBox">
            <Border Background="LightGray" BorderBrush="DarkGray" BorderThickness="2" CornerRadius="10">
                <Grid>
                    <TextBox x:Name="PART_ContentHost" VerticalAlignment="Center" HorizontalAlignment="Left" Margin="10,0,0,0" />
                </Grid>
            </Border>
        </ControlTemplate>
    </TextBox.Template>
</TextBox>

এখানে:

• ControlTemplate: TextBox কন্ট্রোলের কাস্টম কাঠামো তৈরি করেছে, যা একটি বর্ডার এবং গ্রিডের মধ্যে একটি TextBox উপাদান ধারণ করে।
• x:Name="PART_ContentHost": TextBox এর কন্টেন্ট বা ইনপুট হোস্ট করার জন্য এটি PART_ContentHost নামে একটি নামকরণ করা হয়েছে।
• Background, BorderBrush: টেক্সটবক্সের ব্যাকগ্রাউন্ড এবং বর্ডারের রঙ কাস্টমাইজ করা হয়েছে।

Button এবং TextBox এর Custom Template একসাথে

এখন, যদি আপনি একসাথে Button এবং TextBox এর Custom Template তৈরি করতে চান, তবে একটি সাধারণ UI গঠন করা যেতে পারে যেখানে দুটি কাস্টম কন্ট্রোল একত্রে ব্যবহৃত হবে।

উদাহরণ: Button এবং TextBox এর Custom Template একসাথে

<Window x:Class="MyApp.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Main Window" Height="300" Width="400">
    <StackPanel>
        <!-- Custom Button -->
        <Button Width="200" Height="100" Content="Click Me">
            <Button.Template>
                <ControlTemplate TargetType="Button">
                    <Border Background="LightBlue" BorderBrush="DarkBlue" BorderThickness="2" CornerRadius="15">
                        <Grid>
                            <TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" Text="{TemplateBinding Content}" FontSize="20" />
                        </Grid>
                    </Border>
                </ControlTemplate>
            </Button.Template>
        </Button>

        <!-- Custom TextBox -->
        <TextBox Width="300" Height="40" Text="Enter Text">
            <TextBox.Template>
                <ControlTemplate TargetType="TextBox">
                    <Border Background="LightGray" BorderBrush="DarkGray" BorderThickness="2" CornerRadius="10">
                        <Grid>
                            <TextBox x:Name="PART_ContentHost" VerticalAlignment="Center" HorizontalAlignment="Left" Margin="10,0,0,0" />
                        </Grid>
                    </Border>
                </ControlTemplate>
            </TextBox.Template>
        </TextBox>
    </StackPanel>
</Window>

এখানে:

• StackPanel: দুটি কাস্টম কন্ট্রোল—একটি Button এবং একটি TextBox—একই লেআউটে সাজানোর জন্য StackPanel ব্যবহার করা হয়েছে।
• Button এবং TextBox উভয়েই কাস্টম টেমপ্লেটের মাধ্যমে ডিজাইন করা হয়েছে, এবং টেমপ্লেটের মধ্যে কন্টেন্ট এবং বর্ডার কাস্টমাইজ করা হয়েছে।

Conclusion (সারাংশ)

• Custom Template তৈরি করার মাধ্যমে আপনি Button, TextBox, এবং অন্যান্য কন্ট্রোলগুলোর ভিজ্যুয়াল ডিজাইন সম্পূর্ণভাবে কাস্টমাইজ করতে পারেন।
• XAML এর ControlTemplate ব্যবহার করে UI উপাদানের কাঠামো, স্টাইল, এবং অন্যান্য ভিজ্যুয়াল প্রপার্টি পরিবর্তন করা যায়।
• TemplateBinding এর মাধ্যমে কন্ট্রোলের প্রপার্টি এবং কন্টেন্টকে কাস্টম টেমপ্লেটে অ্যাক্সেস করা সম্ভব।